<template>
  <div style="padding: 15px;">
    <div>
      <el-row :gutter="20">
        <el-col :span="18"><div class="grid-content ep-bg-purple"  style="background-color: #fff;padding:15px;">
          <div style="height: 70px;">
            <div style="display: inline-block;width: 50px;height: 50px;float: left;">
              <div style="width: 100%;height: 100%;border: 1px solid #eee;"></div>
            </div>
            <div style="display: inline-block;float: left;margin-left: 5px;">
              <div style="font-size: 16px;">
                小刘，刘鸿基，刘姚峰
              </div>
              <div style="font-size: 12px;margin-top: 3px;">群主：刘鸿基 <span style="margin-left: 7px;">共3位群成员</span></div>
            </div>
            <div style="display: inline-block;float: right;margin-top: 7px;">
              <el-button type="primary" plain>同步</el-button>
              <el-button type="primary" plain>聊天记录</el-button>
            </div>
          </div>
          <div>群聊标签：
            <el-tag style="margin-left: 5px;">测试</el-tag>
            <el-tag style="margin-left: 5px;">发广告</el-tag>
            <span style="margin-left: 7px;color:#409EFF; cursor:pointer;font-size: 14px;"><el-icon><Edit /></el-icon>编辑</span>
          </div>
          <div class="top-label">
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#9A9C9D">总人数</div>
            </div>
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#9A9C9D">总客户数<el-icon><QuestionFilled /></el-icon></div>
            </div>
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#9A9C9D">今日新增<el-icon><QuestionFilled /></el-icon></div>
            </div>
            <div class="label-lists">
              <div style="font-size: 24px;">——</div>
              <div style="color:#9A9C9D">今日流失<el-icon><QuestionFilled /></el-icon></div>
            </div>
          </div>
        </div></el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple"  style="background-color: #fff;">
          <div class="top-rigth">
            <div style="display: inline-block;margin-left: 15px;">群公告</div>
            <div class="to-update"><el-icon><RefreshRight /></el-icon><span>更新</span></div>
          </div>
          <div>
            <el-empty description="description" :image-size="80" />
          </div>
        </div></el-col>
        
      </el-row>
    </div>
    <div style="background-color: #fff;padding: 15px;margin-top: 20px;">
      <div style="margin-bottom: 15px;">图表数据</div>
      <dv style="margin-top: 15px;">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
          <el-radio-button label="top">总人数</el-radio-button>
          <el-radio-button label="right">客户总数</el-radio-button>
          <el-radio-button label="bottom">入群人数</el-radio-button>
          <el-radio-button label="left">退群人数</el-radio-button>
          <el-radio-button label="left">活跃人数</el-radio-button>
        </el-radio-group>
      </dv>
      <div>
        <el-select v-model="value" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <sapn style="margin-left: 7px;">选择时间：</sapn>
        <span><el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        :size="size"
      /></span>
      <span style="float: right"><el-button>重置</el-button></span>
      </div>
      <div style="height: 300px;">

      </div>
    </div>
  </div>
</template>
<script>

</script>
<style>
  .top-rigth{
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    padding-top: 10px;
    
  }
  .to-update{
    float: right;
    margin-right: 15px;
    color: #9A9C9D;
    font-size: 12px;
  }
.top-label{
  border: 1px solid #79bbff;
  padding: 20px 40px;
  background-color: #FBFDFF;
  margin-top: 15px;
  border-radius: 5px;
}
.label-list{
  width: 25%;
  height: 70px;
  display: inline-block;
  color: black;
  text-align: center;
  border-right: 1px solid #e9e9eb;
  /* line-height: 70px; */
}
.label-lists{
  width: 25%;
  height: 70px;
  display: inline-block;
  color: black;
  text-align: center;
}
</style>